<template>
    <div class="components_edit_modal profession_group_eidt" id="profession-group-eidt">
        <el-dialog :title="form.id?'编辑专业组':'添加专业组'" :visible.sync="state" :show-close="true" :close-on-click-modal="false" @open="open">
            <el-form :model="form"   :rules="rules" ref="form">
                <el-form-item label="名称："  prop="name">
                    <el-input v-model.trim="form.name" auto-complete="off" placeholder="请填写专业组名称"></el-input>
                </el-form-item>

                <el-form-item label="专业负责人：" prop="leaderId">
                    <el-select v-model="form.leaderId" placeholder="请选择" filterable>
                        <el-option
                            v-for="item in leaderList" :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="备注：">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        v-model.trim="form.remark" auto-complete="off">
                    </el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    import { mapGetters } from 'vuex'
    export default {
        data() {
            return {
                 state: false,
                 courseBookId: null,
                 rules: {
                    name: [
                        { required: true, message: '请填写专业组名称', trigger: 'blur' ,type: 'string'},
                        {  max: 50, message: '长度不能大于50字符', trigger: 'blur' }
                    ],
                   leaderId: [
                         { required: true, message: '请选择专业负责人', trigger: 'change', }
                    ],
                   remark: [
                     {  max: 500, message: '备注不能长于500个字符', trigger: 'blur' }
                    ],

                 },
                form: {
                    id: null,
                    name:null,
                    leaderId:null,
                  remark:""

                },
                // 负责人列表
                leaderList: null,
                method:"post",
                url:api.professionGroup.add
            }
        },
        created() {

        },
        mounted() {},
        computed:{
        },
        methods: {
          // 打开模态框
          showDialog(id){
            this.state = true;
            if (id) {
              this.form.id = id;
            }else{
              this.form.id = null;
            }
          },
          open(){
            this.$nextTick(()=>{

              //清空验证信息
              this.$refs.form.resetFields();
              //清空原始数据
              this.clear();
              // 获取负责人列表
              this.getLeaderList();
              if (this.form.id) {
                this.initData(()=>{
                });
              }
            });
          },
          clear(){
            for(let attr in this.form){
              if(attr != "id"){
                this.form[attr] = null;
              }
            }
          },
          //页面为编辑时初始化收项项目
          initData(callback){
            let vm = this;
            if (vm.form.id) {
              let url = api.professionGroup.detail.replace("{id}", vm.form.id);
              vm.axios.get(url).then((response) => {
                if (response.data.success) {
                  let result = response.data.data;
                  for (let attr in result) {
                    vm.form[attr] = result[attr];
                  }
                  callback();
                } else {
                  vm.$message.error(response.data.msg);
                }
              });
            }
          },

            // 获取负责人列表
          getLeaderList() {
                let vm = this;
                vm.axios.get(api.userAllListUrl).then((response) => {
                    if (response.data.success) {
                        this.leaderList = response.data.data;
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 保存
            submit() {
                let vm = this;
                vm.$refs['form'].validate((valid) => {

                  if (valid) {
                    let loader = vm.$loading({target:"#profession-group-eidt"});
                    if (vm.form.id) {
                      vm.method = "put";
                      vm.url = api.professionGroup.edit;
                    }
                    vm.axios({
                      method: vm.method,
                      url: vm.url,
                      data: vm.form,
                      // headers:{
                      //   'Content-type': 'application/x-www-form-urlencoded'
                      // },
                      transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                      }]
                    }).then((response) => {
                      if (response.data.success) {
                        vm.$message({
                          type: 'success',
                          message: response.data.msg,
                        });
                        vm.state = false;
                        vm.$parent.$refs.professionGroupTable.$emit('vuetable:refresh');
                      } else {
                        vm.$message.error(response.data.msg);
                      }
                      loader.close();
                    }).catch(function(err){
                      vm.$message.error("网络异常");
                      loader.close();
                    });
                  } else {
                    return false;
                  }
                });
            },
        },
        components: {}
    };
</script>
<style>
  .profession_group_eidt .el-dialog{
    width: 30%;
  }
  .profession_group_eidt .el-form-item{
    width: 100%;
    display: block;
  }
  .profession_group_eidt .el-form-item .el-form-item__label{
    width: 20%;
  }
</style>
